<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>S5M: An Introduction</title>
<!-- metadata -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="generator" content="S5M" />
<meta name="version" content="r*" />
<meta name="pressdate" content="20110320" />
<meta name="author" content="An opensource enthusiast" />
<meta name="company" content="SOHO" />
<!-- configuration parameters -->
<meta name="defaultView" content="slideshow" />
<meta name="controlVis" content="hidden" />
<meta name="useTransition" content="true" />
<!-- style sheet links -->
<link rel="stylesheet" href="ui/default/slides.css" type="text/css" media="projection" id="slideProj" />
<link rel="stylesheet" href="ui/default/outline.css" type="text/css" media="screen" id="outlineStyle" />
<link rel="stylesheet" href="ui/default/print.css" type="text/css" media="print" id="slidePrint" />
<link rel="stylesheet" href="ui/default/opera.css" type="text/css" media="projection" id="operaFix" />
<!-- embedded styles -->
<style type="text/css" media="all">
.imgcon {width: 525px; margin: 0 auto; padding: 0; text-align: center;}
#anim {width: 270px; height: 320px; position: relative; margin-top: 0.5em;}
#anim img {position: absolute; top: 42px; left: 24px;}
img#me01 {top: 0; left: 0;}
img#me02 {left: 23px;}
img#me04 {top: 44px;}
img#me05 {top: 43px;left: 36px;}
span.symbol {
  font-weight: 700;
  font-family: Verdana, sans-serif;
}
span.gone {
  text-decoration: line-through;
}
h1 > span { color: #369; }
h1 span.s5 { color: #003; }
h1 span.m { color: #03f; }
</style>
<!-- S5 JS -->
<script src="lib/mootools-core-1.3.2.js" type="text/javascript"></script>
<script src="lib/mootools-more-1.3.2.js" type="text/javascript"></script>
<script src="lib/mootools-Class.Occlude.js" type="text/javascript"></script>
<script src="lib/mootools-Assets.js" type="text/javascript"></script>
<script src="lib/fxBlinker.js" type="text/javascript"></script>
<!--[if IE 6]>
<script src="lib/FixPNG.js" type="text/javascript"></script>
<![endif]-->
<script src="lib/scale.js" type="text/javascript"></script>
<script src="ui/default/presentation.js" type="text/javascript"></script>
</head>
<body>

<div class="layout">
  <div id="controls"><!-- DO NOT EDIT --></div>
  <div id="currentSlide"><!-- DO NOT EDIT --></div>
  <div id="header">
    <h1>S5M = S5 + Mootools</h1>
  </div>
  <div id="footer">
    <h1>S5M a fork on S5</h1>
    <h2>Your computer &#8226; Today's date</h2>
  </div>
</div>

<div class="presentation">

<div class="slide">
<h1><span class="s5">S5</span><span class="m">M</span> <span>a fork on <a href="http://meyerweb.com/eric/tools/s5/" rel="external">S5</a></span></h1>
<h3>An opensource enthusiast</h3>
<h4>not a representative of any organization</h4>
<div class="handout"></div>
</div>


<div class="slide">
<h1>What Is S5?</h1>
<ul>
<li>It's a <strong>S</strong>imple <strong>S</strong>tandards-based <strong>S</strong>lide <strong>S</strong>how <strong>S</strong>ystem</li>
<li>One XHTML document provides all of the slide show's content</li>
<li>CSS handles the layout and look of the slides</li>
<li>JavaScript handles the dynamic aspects of the show</li>
<li>That's all there is to it!  (<a href="#slide100">skip to summary</a>; demonstrates links internal to the slide show)</li>
<li>Skip to <a href="#slide11"><strong>S5M</strong> Enhancements</a></li>
</ul>
</div>


<div class="slide">
<h1>Operatic Origins</h1>
<ul>
<li>Opera 4 introduced <a href="http://www.opera.com/support/tutorials/operashow/" rel="external" title="broken link"><span class="gone">Opera Show</span></a>, a projection-mode style sheet technology (link demonstrates external link styling and window spawning)</li>
<li>Allows a single XHTML document to be turned into a PowerPoint-like slide show</li>
<li>Adding screen and print style sheets allows for multi-medium views of a single document</li>
<li>Highly efficient, but highly browser centric...</li>
</ul>
</div>


<div class="slide">
  <h1>Incremental Display</h1>
  <ul class="incremental show-first">
    <li>Keep hitting/clicking "next" as long as it isn't the control link (<span class="symbol">&raquo;</span>)</li>
    <li>Bullet points are revealed one by one
      <ul class="incremental">
        <li>All based on class name of <code>incremental</code></li>
        <li>Lists can be classed to make items appear individually</li>
        <li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li>
      </ul>
    </li>
    <li>Let's try it again, but without the first bullet point being pre-highlighted...</li>
  </ul>
</div>


<div class="slide">
<h1>Incremental Display II</h1>
<ul class="incremental">
<li>Keep hitting/clicking "next" as long as it isn't the control link (&raquo;)</li>
<li>Bullet points are revealed one by one
<ul>
<li>All based on class name of <code>incremental</code></li>
<li>Lists can be classed to make items appear individually</li>
<li>Individual items can be classed as well to create "animations"; see <a href="http://boxofchocolates.ca/projects/s5-incremental-graphics/" rel="external">Derek Featherstone's example</a></li>
</ul>
</li>
<li>Notice how the sub-list was part of the parent bullet point; that was done on purpose</li>
<li>Now to move on to other test slides!</li>
</ul>
</div>


<div class="slide">
<h1>PNG Alpha Tests</h1>
<div style="width: 400px; height: 150px; text-align: center; background: url(ui/i18n/bg-shade.png)">
<p>DIV with PNG background followed by foreground PNG</p>
<img src="ui/i18n/bg-shade.png" alt="" title="A translucent image" />
</div>
<div style="width: 100%; height: 150px; text-align: center; background: url(ui/i18n/bg-shade.png)">
<p>DIV with PNG background followed by foreground PNG</p>
<img src="ui/i18n/bg-shade.png" alt="" title="A translucent image" />
</div>
</div>

<div class="slide">
<h1>S5 Default File Structure</h1>
<p style="text-align: center;">
<img src="pix/s5filemap.png" alt="" title="At a Glance" />
</p>
</div>


<div class="slide">
<h1>S5 Themes</h1>
<p class="imgcon">
<img src="pix/S501.jpg" alt="" title="Default" />
<img src="pix/S502.jpg" alt="" title="I18N" />
<img src="pix/S503.jpg" alt="" title="Blue" />
<img src="pix/S504.jpg" alt="" title="Flower" /><br/>
(one way of presenting multiple graphics)
</p>
</div>


<div class="slide">
<h1>Incremental S5 Themes</h1>
<p class="imgcon">
<img src="pix/S501.jpg" alt="" title="Default" class="incremental" />
<img src="pix/S502.jpg" alt="" title="I18N" class="incremental" />
<img src="pix/S503.jpg" alt="" title="Blue" class="incremental" />
<img src="pix/S504.jpg" alt="" title="Flower" class="incremental" /><br/>
(one by one!)
</p>
</div>


<div class="slide">
<h1>Incremental Animation</h1>
<ul>
<li>A demonstration of just one of the many ways to accomplish simple animation-like effects <small>(using a diagram from <a href="http://gmpg.org/xfn/and/" rel="external">"XFN and..."</a>)</small></li>
</ul>
<p class="imgcon" id="anim">
<img src="pix/mememe01.png" id="me01" alt="" />
<img src="pix/mememe02.png" alt="" id="me02" class="incremental" />
<img src="pix/mememe03.png" alt="" id="me03" class="incremental" />
<img src="pix/mememe04.png" alt="" id="me04" class="incremental" />
<img src="pix/mememe05.png" alt="" id="me05" class="incremental" />
</p>
</div>


<div class="slide">
<h1>In Summary</h1>
<ul>
<li>With minimal scripting, we have recreated and improved upon a (currently) browser-specific technology, making it cross-browser in the process.</li>
<li><span class="gone">The S5 format is OSF 1.0 compatible</span> Opera Show Format was descontinued.</li>
<li>S5 is a very flexible and lightweight slide show system available for anyone to use.</li>
</ul>
</div>

<div class="slide">
<h1>S5M Enhancements</h1>
<ul class="incremental show-first">
<li>Using <a href="http://mootools.net/" title="Mootools website" rel="external">Mootools</a> 1.3.1 in the modified/revised algorithm.</li>
<li>In <strong>Slide Show</strong> mode:
  <ul class="incremental show-first">
    <li>Automatic forward/backward Slide Show.</li>
    <li>Optional transition effect in slide changes.</li>
    <li>More responsive to keyboard and mouse, e.g.:<br/> &lt;<strong>Shift</strong>&gt;+&lt;<strong>Click</strong>&gt; to display previous slide.</li>
    <li>Zoom fonts and images on the fly with persistence.</li>
  </ul></li>
<li>Scroll effect in <strong>Outline</strong> mode.</li>
<li>Slider effect in both modes for multiple elements in same slide.</li>
<li>More cross-browser than ever and works with Opera.</li></ul>
</div>

</div>

</body>
</html>
